<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script src="../js/axios/axios-1.3.6.min.js"></script>
    <style>
        button, input {
            width: 300px;
            height: 35px;
            font-size: 18px;
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<h2>上传文件</h2>
<form>
    <input type="file" name="file" id="file">
    <input type="text" name="from_path" value="" placeholder="文件原始路径">
    <input type="text" name="dst_path" value="" placeholder="文件目标路径">
    <button class="button" type="button" onclick="upload()">上传文件</button>
</form>
<button class="button" type="button" onclick="moveFile()">转移文件</button>
<input type="text" name="file_path" value="" placeholder="删除的文件路径"><br>
<button class="button" onclick="deleteFile()">删除文件</button>
<script>
    /**
     * 后端返回参数, 前端直传
     * timestamp 时间戳到秒 string
     * app_key 应用key string
     * nonce_str 随机字符串16位 string
     * Authorization 签名 string
     * 签名算法: 根据前三个参数字典排序,转成 url 字符串 + &app_secret=app_secret; 全部转小写, 再进行 MD5 加密; 加密前的字符串如下
     * MD5(app_key=jk_o9xembg4y6wpguc2&nonce_str=abcdefghijk1234×tamp=1672116097&app_secret=t5cieuirn7oeajhq7mt41yn8digp7kmb)
     */
    // 上传示例
    function upload() {
        let formData = new FormData()
        let dst_path = document.querySelector('input[name="dst_path"]').value // 指定上传目录, 空则默认
        let files = document.getElementById("file").files // file
        if(files.length === 0) {
            alert("请上传文件")
            return
        }
        formData.append("file",files[0])

        let headers = {
            "Content-Type": "multipart/form-data",
            "Authorization": "dfecb108933733e25995b884580c9267",
        }
        let data = {
            timestamp: "1672116097",
            app_key: "jk_o9xembg4y6wpguc2",
            nonce_str: "abcdefghijk1234",
            dst_path: dst_path,
        }

        for(let key in data) {
            formData.append(key,data[key])
        }
        axios.post("http://192.168.1.196:8888/oss/upload", formData, {
            headers: headers
        }).then(res => {
            console.log("res", res.data)
        }).catch(err => {
            console.log("err", err)
        })
    }
    // 文件转移
    function moveFile() {
        let formData = new FormData()
        let from_path = document.querySelector('input[name="from_path"]').value
        let dst_path = document.querySelector('input[name="dst_path"]').value
        let headers = {
            "Content-Type": "form-data",
            "Authorization": "dfecb108933733e25995b884580c9267",
        }
        let data = {
            timestamp: "1672116097",
            app_key: "jk_o9xembg4y6wpguc2",
            nonce_str: "abcdefghijk1234",
            from_path: from_path,
            dst_path: dst_path,
        }
        for(let key in data) {
            formData.append(key,data[key])
        }
        axios.post("http://192.168.1.196:8888/oss/moveFile", formData, {
            headers: headers
        }).then(res => {
            console.log("res", res.data)
        }).catch(err => {
            console.log("err", err)
        })
    }
    // 文件删除; (空目录也可以删除)
    function deleteFile() {
        let formData = new FormData()
        let file_path = document.querySelector('input[name="file_path"]').value
        let headers = {
            "Content-Type": "form-data",
            "Authorization": "dfecb108933733e25995b884580c9267",
        }
        let data = {
            timestamp: "1672116097",
            app_key: "jk_o9xembg4y6wpguc2",
            nonce_str: "abcdefghijk1234",
            file_path: file_path,
        }
        for(let key in data) {
            formData.append(key,data[key])
        }
        axios.post("http://192.168.1.196:8888/oss/deleteFile", formData, {
            headers: headers
        }).then(res => {
            console.log("res", res.data)
        }).catch(err => {
            console.log("err", err)
        })
    }
</script>
</body>

</html>
